CSS動畫-Animation(三)(iteraction-count/direction/fill-mode/play-state)

2019鐵人賽

卡羅奇奇

團隊浪流連九程式匠自然產生的佛系碼農專區

2018-10-20 01:52:34

3380 瀏覽

分享至

Animation(iteraction-count/direction/fill-mode/play-state)

今天要來介紹animation剩下的屬性：

animation-iteration-count：動畫播放次數
animation-direction：動畫播放方向
animation-fill-mode：動畫播放前後狀態
animation-play-state：動畫播放或暫停

animation-iteration-count 動畫播放次數

屬性值介紹

名稱	說明
number	播放的次數，預設值為1
infinite	動畫連續播放不停止

animation-direction 動畫播放方向

屬性值介紹

名稱	說明
normal	預設值，正常播放，順向，從0%→100%
reverse	反向播放，逆向，從100%→0%
alternate	正逆向輪流播放，奇數次為0%→100%，偶數次為100%→0%，若動畫播放次數只有一次就只會正常播放。
alternate-reverse	alternate 的相反，奇數次為100%→0%，偶數次為0%→100%，若動畫播放次數只有一次就只會反向播放。

如下圖，為alternate的示範，第一次是從50px放大到100px，第二次是從100px縮小到50px，再加上infinite無限播放，就形成一直放大縮小的情形

.ball{
  background-color:black;
  color:white;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  animation:change 3s alternate infinite;
}
@keyframes change{
  from{
    width:50px;
    height:50px;
  }
  to{
    width:100px;
    height:100px;
  }
}

animation-fill-mode 動畫播放前後模式

屬性值介紹

名稱	說明
none	預設值，播放結束後，返回最初狀態
forwards	播放結束後，保持在最後影格狀態
backwards	播放結束後，保持在第一個影格狀態
both	alternate 的相反，奇數次為 100% 到 0%，偶數次為 0% 到 100%，若動畫播放次數只有一次就只會反向播放。